import React, { Component } from 'react'
import axios from 'axios'
import './mock'
import './app.css'

export default class App extends Component {


    state = {
        loading: false,
        currentEditId: '',
        userList: []
    }

    updateAppState = state => {
        this.setState(state)
    }

    // 获取数据源
    getData = () => {
        this.updateAppState({ loading: true })
        axios.get('/getMockData', {
            params: {
                page: 1,
                pagesize: 10
            }
        }).then(res => {
            if (res.data.status === 200) {
                this.setState({
                    loading: false,
                    userList: res.data.list.list
                })
            }
        })
    }

    componentDidMount() {
        // 挂载时获取数据
        this.getData()
    }

    // 添加新数据
    addNewData = () => {
        axios.post('/addMockData', {
            name: this.newName.value,
            address: this.newAddress.value
        }).then(res => {
            if (res.data.status === 200) {
                console.log(res.data.message)
                this.getData()
            }
        })
    }

    // 编辑数据前展示数据
    editData = (id) => {
        return () => {
            this.setState({
                currentEditId: id
            })
            const target = this.state.userList.find(v => {
                return v.id === id
            })
            this.newName.value = target.name
            this.newAddress.value = target.address
        }
    }

    // 更新数据
    updateData = () => {
        axios.post('/updateMockData', {
            id: this.state.currentEditId,
            name: this.newName.value,
            address: this.newAddress.value
        }).then(res => {
            if (res.data.status === 200) {
                console.log(res.data.message)
                this.getData()
            }
        })
    }

    // 删除数据
    deleteData = id => {
        return () => {
            axios.post('/deleteMockData', { id }).then(res => {
                if (res.data.status === 200) {
                    console.log(res.data.message)
                    this.getData()
                }
            })
        }
    }

    render() {
        const { userList } = this.state
        return (
            <div className="app">
                <h1>
                    MockJS Test
                    {
                        this.state.loading ? <span>Loading...</span> : <i></i>
                    }
                </h1>
                <label htmlFor="name">Name: </label>
                <input ref={c => this.newName = c} type="text" id="name" /><br />
                <label htmlFor="address">Address: </label>
                <input ref={c => this.newAddress = c} type="text" id="address" />&nbsp;
                <button onClick={this.addNewData}>Add</button><br />
                <button onClick={this.updateData}>Editor</button>
                <table>
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Avatar</td>
                            <td>Name</td>
                            <td>Address</td>
                            <td>Time</td>
                            <td>Options</td>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            userList.map(v => {
                                return (
                                    <tr key={v.id}>
                                        <td>{v.id}</td>
                                        <td className="v-h-center">
                                            <img src={v.avatar} alt="0.0" />
                                        </td>
                                        <td>{v.name}</td>
                                        <td>{v.address}</td>
                                        <td>{v.time}</td>
                                        <td className="options">
                                            <button onClick={this.editData(v.id)}>Editor</button>
                                            <button onClick={this.deleteData(v.id)}>Delete</button>
                                        </td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }
}
